<template>
  <div class="contents">
    <PanelTitle title="成本分析" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/monitor/plant/cost/statist/list",
    method: "get",
    params: {
      yearly: new Date().getFullYear()
    }
  });

  let legend = [
        "种子种苗",
        "土地租金",
        "人工费用",
        "农药化肥",
        "材料",
        "初加工费用",
      ]


  let xAxis = []
  for(let item of res.data){
    for(let a of item.yearCostList){
      xAxis.push(a.costYear)
    }
  }
  xAxis = Array.from(new Set(xAxis))
  xAxis.sort((a, b) => new Date(a).getTime() - new Date(b).getTime())

  let series = []
  for(let item of res.data){
    let obj = {
      name: legend[item.type - 1],
      type: 'line',
      symbol: 'none',
      smooth: true,
      data: []
    }
   
    for(let x of xAxis){
      let have = false
      for(let d of item.yearCostList){
        if(x == d.costYear){
          have = true
          obj.data.push(d.cost)
        }
      }
      if(!have){
        obj.data.push(0)
      }
    }
    series.push(obj)
  }
  
  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "axis",
    },
    legend: {
      icon: "circle",
      itemWidth: fitChartSize(7),
      itemHeight: fitChartSize(7),
      bottom: "bottom",
      data: series.map(item => item.name),
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: fitChartSize(9),
      },
    },
    color: ["#74FFFD", "#72BCFF", "#FF9745", "#FBFC01", "#2FC25B", "#8525E0"],
    grid: {
      left: "3%",
      right: "7%",
      bottom: "14%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: xAxis,
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      name: "单位：元/亩",
      nameTextStyle: {
        color: "#fff",
        fontSize: fitChartSize(9),
        padding: [0, fitChartSize(-600), 0, 0],
      },
      splitNumber: 4,
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,0.09)", //线条颜色
        },
      },
      axisLabel: {
        textStyle: {
          color: "#7AFFFD",
          fontSize: fitChartSize(9),
        },
      },
    },
    series: series
  });
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 100%;
}
</style>